w<script setup>
import { defineExpose, reactive, ref } from 'vue';

const props = defineProps({
  isDrawerOpen: {
    type: Boolean,
    required: true,
  },
  operType: {
    type: Number,
    required: true,
    default: 0,
  },
  nodeData: Object,
})

const emits = defineEmits([
  'update:isDrawerOpen',
  'addData',
  'updateData',
  'setNodeProp',
  'resizableHandle',
])

const operType = ref(props.operType)
const nodeDataRef = ref(props.nodeData)
const nodeData = nodeDataRef.value
const isFormValid = ref(false)
const refForm = ref()
const title = ref("属性设置")

const groupTypeList = [
  { title: "并行分组", value: 0 },
  // { title: "串行分组", value: 1 },
  // { title: "子流程", value: 2 },
  { title: "捕获异常", value: 3 },
  { title: "与或非", value: 4 },
]

const groupType = ref(nodeData.properties.groupType || 0)
const showGroup0 = ref(false)
const showGroup1 = ref(false)
const showGroup2 = ref(false)
const showGroup3 = ref(false)

watch(groupType, val => {
  emits('setNodeProp', { "componentName": getTitleByValue(val) })
  emits('setNodeProp', { "groupType": val })
  changeGroupType(val)
})

const changeGroupType = val => {
  if(val == 0){
    showGroup0.value = true;
    showGroup1.value = false;
    showGroup2.value = false;
    showGroup3.value = false;
  }else if(val == 1){
    showGroup0.value = false;
    showGroup1.value = true;
    showGroup2.value = false;
    showGroup3.value = false;
  }else if(val == 2){
    showGroup0.value = false;
    showGroup1.value = false;
    showGroup2.value = true;
    showGroup3.value = false;
  }else if(val == 3){
    showGroup0.value = false;
    showGroup1.value = false;
    showGroup2.value = false;
    showGroup3.value = true;
  }
}

const getTitleByValue = value => {
  const item = groupTypeList.find(item => item.value === value);
  return item ? item.title : null;
}


// WHEN属性面板
const ignore_type = ref(nodeData.properties.ignore_type || -1)
const show_when_must = ref(nodeData.properties.ignore_type == 2 || false)

const ignoreTypeList = [
  { key: 1, label: '任一节点先执行完则忽略其他(any)', color: "success" },
  { key: 2, label: '指定任意节点先执行完则忽略其他(must)', color: "success" },
]

const when_ignoreError = ref(nodeData.properties.when_ignoreError || false)
const when_any = ref(nodeData.properties.when_any || false)
const when_must = ref(nodeData.properties.when_must || '')

watch(ignore_type, val => { 
  if(typeof val === 'number' && val == 1){
    show_when_must.value = false
    emits('setNodeProp', { "ignore_type": val, "when_any": true, "when_must": null })
  }else if(typeof val === 'number' && val == 2){
    show_when_must.value = true
    emits('setNodeProp', { "ignore_type": val, "when_any": false, "when_must": null })
  }
})
watch(when_ignoreError, val => {emits('setNodeProp', { "when_ignoreError": val })})

// watch(when_any, val => { when_must.value = '';emits('setNodeProp', { "when_any": val })})
watch(when_must, val => { when_any.value = false;emits('setNodeProp', { "when_must": val })})





// 👉 drawer close
const closeNavigationDrawer = () => {
  emits('update:isDrawerOpen', false)
  emits('resizableHandle', false)
  defaultStyles()
  nextTick(() => {
    refForm.value?.reset()
    refForm.value?.resetValidation()
  })
}


const handleDrawerModelValueUpdate = val => {
  emits('update:isDrawerOpen', val)
  emits('resizableHandle', true)
  defaultStyles()
}

// 初始化下拉框数据
onMounted(() => {
  defaultStyles()
  changeGroupType(groupType.value)
})

const temporary = ref(true)
if(operType.value == 2){
  temporary.value = false
}



const dynamicStyles = reactive({
  position: '',
  transition: 'all 0.5s ease',
})

const defaultStyles = () => {
  dynamicStyles.position = operType.value == 2 ? '' : 'fixed'
}

const showSettingDialog = () => {
  if(dynamicStyles.position == ''){
    dynamicStyles.position = 'fixed'
  }else{
    dynamicStyles.position = ''
  }
}

const currentTab = ref(0)
</script>

<template>
  <VNavigationDrawer
    temporary
    style="inline-size: 800px;"
    :style="dynamicStyles"
    location="end"
    class="scrollable-content"
    :model-value="props.isDrawerOpen"
    @update:model-value="handleDrawerModelValueUpdate"
  >

    <div class="pa-2 d-flex align-center">
      <h5 class="text-h5">
        {{ title }}
      </h5>
      <VSpacer />

      <IconBtn
        variant="tonal"
        class="rounded"
        size="32"
        @click="showSettingDialog"
        style="margin-inline-end: 8px;"
      >
        <VIcon
          size="18"
          icon="tabler-window-maximize"
        />
      </IconBtn>

      <IconBtn
        variant="tonal"
        class="rounded"
        size="32"
        @click="closeNavigationDrawer"
      >
        <VIcon
          size="18"
          icon="tabler-x"
        />
      </IconBtn>
    </div>

    <VDivider />

    <VCard class="ivy-cmp-edit-card" style="overflow-y: scroll;">
      <VCardText>
        <VForm
          ref="refForm"
          v-model="isFormValid"
        >
          <VWindow
            v-model="currentTab"
            class="ivy-cmp-edit-window"
          >
            <VWindowItem
              :key="0"
              class="ivy-cmp-edit-window-item"
            >
              <VRow>
                <VCol cols="12">
                  <VAutocomplete
                    v-model="groupType"
                    class="setting-mb-12"
                    variant="outlined"
                    label="请选择分组类型"
                    :items="groupTypeList"
                    item-title="title"
                    item-value="value"
                    clearable
                  />
                </VCol>
                <VCol v-if="showGroup0">
                  <VCheckbox
                    v-model="when_ignoreError"
                    label="忽略错误(ignoreError)"
                  />

                  <VRadioGroup
                    v-model="ignore_type"
                    inline
                  >
                    <div>
                      <VRadio
                        v-for="radio in ignoreTypeList"
                        :key="radio.key"
                        :label="radio.label"
                        :color="radio.color"
                        :value="radio.key"
                      />
                    </div>
                  </VRadioGroup>

                  <VTextField
                    v-if="show_when_must"
                    v-model="when_must"
                    class="setting-mb-12 setting-mt-12"
                    label="指定组件ID, 表达式ID"
                    counter
                    maxlength="50"
                    hint="must(组件ID, 表达式ID)"
                  />
                </VCol>
                <VCol v-if="showGroup1"></VCol>
                <VCol v-if="showGroup2"></VCol>
                <VCol v-if="showGroup3"></VCol>
              </VRow>
            </VWindowItem>
          </VWindow>
        </VForm>
      </VCardText>
    </VCard>
  </VNavigationDrawer>
</template>

<style scoped>
.w-100 {
  inline-size: 100%;
}

.ivy-cmp-edit-tabs {
  margin: 0 !important;
}

.ivy-cmp-edit-card {
  block-size: 100% !important;
}

/* .ivy-cmp-edit-window-item {
  margin-block-start: 24px !important;
} */

.ivy-cmp-edit-window {
  margin-block-end: 24px !important;
}

.ivy-cmp-edit-window-item .v-row .v-col {
  padding-block-start: 24px;
}
</style>
